<template>
	<z-nav-bar title="球员档案"></z-nav-bar>
	<view v-if="data.length">
		<view v-for="(element, index) in data" :key="index" class="common-box">
			<view class="flex_sbc">
				<view class="flex_fsc uni-mx-32">
					<image
						:src="setting.oss_pub_domain + '/app-img/player/icon-record.png'"
						class="icon-size uni-mr-16"
					></image>
					<view class="z-font-32 text-w">{{ element.dictLabel }}</view>
				</view>
				<view class="flex_fsc">
					<view v-if="editDictCode === element.dictCode" class="edit" @click="saveInfo">保存</view>
					<view class="edit" @click="editDictCode = element.dictCode">编辑</view>
				</view>
			</view>
			<view class="line-spacing uni-mt-24 uni-mb-24"></view>
			<view v-for="(item, ii) in element.children" :key="ii" class="flex_fsc uni-mt-12 uni-ml-32">
				<view class="item-name uni-color-grey">{{ item.dictLabel }}</view>
				<view class="uni-color-grey">：</view>
				<input
					v-if="editDictCode === element.dictCode"
					v-model="playerInfo.other[element.dictCode][item.dictCode]"
					:placeholder="`请输入${item.dictLabel}`"
					class="input-box"
					placeholder-class="input-box-placeholder"
				/>
				<view v-else class="uni-ml-8">{{ playerInfo.other[element.dictCode][item.dictCode] }}</view>
			</view>
		</view>
	</view>
	<view v-else class="text-c">
		<image :src="setting.oss_pub_domain + '/app-img/player/no-record.png'" class="no-image"></image>
		<view class="z-font-32 uni-color-grey">还未有档案</view>
	</view>
</template>

<script setup>
import { getConfig } from '@/api/common';
import { stuUpdateOther, getStudentProfile } from '@/api/player';
import { onShow } from '@dcloudio/uni-app';
import { ref, reactive, getCurrentInstance } from 'vue';
const { proxy: that } = getCurrentInstance();
const playerInfo = uni.getStorageSync('player-info');
if (!playerInfo.other) playerInfo.other = {};
else playerInfo.other = JSON.parse(playerInfo.other);

const data = ref([]),
	editDictCode = ref('');
getStudentProfile().then((res) => {
	data.value = res;
	res.forEach((item) => {
		if (!playerInfo.other[item.dictCode]) playerInfo.other[item.dictCode] = {};
		if (item.children && item.children.lenght)
			item.children.forEach((el) => {
				if (!playerInfo.other[item.dictCode][el.dictCode]) playerInfo.other[item.dictCode][el.dictCode] = '';
			});
	});
});

function saveInfo() {
	stuUpdateOther({ id: playerInfo.id, other: JSON.stringify(playerInfo.other) }).then((res) => {
		that.tools.alert('信息保存成功');
		editDictCode.value = '';
	});
}
</script>

<style lang="scss">
page {
	background: $uni-F5F5F5;
}

.common-box {
	width: 686rpx;
	border-radius: 24rpx;
	background: $uni-white;
	margin: 20rpx 32rpx 0;
	box-sizing: border-box;
	padding: 32rpx 0 40rpx;
	.item-name {
		min-width: 116rpx;
		text-align: justify;
		text-align-last: justify;
	}
}

.no-image {
	width: 320rpx;
	height: 320rpx;
	padding-top: 60rpx;
}
.edit {
	width: 88rpx;
	height: 40rpx;
	line-height: 40rpx;
	text-align: center;
	border-radius: 20rpx;
	border: 2rpx solid $uni-text-color-main;
	color: $uni-text-color-main;
	font-size: 24rpx;
	margin-right: 32rpx;
}

.input-box {
	padding: 10rpx 16rpx;
	background: #f5f5f5;
	font-size: 22rpx;
}

.input-box-placeholder {
	color: #b6b6b6;
}
</style>
